import React, { Component } from 'react';
import { Collapse } from 'antd';
import "./index.scss"

const { Panel } = Collapse;

class Css_demo extends Component {
	render() {
		return (
			<div className='css-box-sub1' >
				{/*  渐变+超行 */}
				<div className='iframe-box1'>
					<Collapse destroyInactivePanel>
						<Panel header="渐变字体+超行显示..." key="1">
							<div className='css-sub'>
								<h2>React Router </h2>
								<h2>React Router </h2>
								<h2>React Router </h2>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 旋转 */}
				<div className='iframe-box2'>
					<Collapse destroyInactivePanel>
						<Panel header="旋转" key="2">
							<div className='css-sub'>
								<div className='text'> </div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 毛玻璃 */}
				<div className='iframe-box3'>
					<Collapse destroyInactivePanel>
						<Panel header="毛玻璃+文字毛玻璃变清晰" key="3">
							<div className='css-sub'>
								<div className='maoboli'>
									<div className='text'>放进来</div>
								</div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 渐变背景 */}
				<div className='iframe-box4'>
					<Collapse destroyInactivePanel>
						<Panel header="渐变背景（径向）" key="4" forceRender>
							<div className='css-sub'></div>
						</Panel>
					</Collapse>
				</div>
				{/*隧道动画*/}
				<div className='iframe-box5'>
					<Collapse destroyInactivePanel>
						<Panel header="隧道动画效果" key="5">
							<div className='css-sub'>
								<div className="farme" style={{ "--i": 1 } as any} ></div>
								<div className="farme" style={{ "--i": 2 } as any}></div>
								<div className="farme" style={{ "--i": 3 } as any}></div>
								<div className="farme" style={{ "--i": 4 } as any}></div>
								<div className="farme" style={{ "--i": 5 } as any}></div>
								<div className="farme" style={{ "--i": 6 } as any}></div>
								<div className="farme" style={{ "--i": 7 } as any}></div>
								<div className="farme" style={{ "--i": 8 } as any}></div>
								<div className="farme" style={{ "--i": 9 } as any}></div>
								<div className="farme" style={{ "--i": 10 } as any}></div>
								<div className="farme" style={{ "--i": 11 } as any}></div>
								<div className="farme" style={{ "--i": 12 } as any}></div>
								<div className="farme" style={{ "--i": 13 } as any}></div>
								<div className="farme" style={{ "--i": 14 } as any}></div>
								<div className="farme" style={{ "--i": 15 } as any}></div>
								<div className="farme" style={{ "--i": 16 } as any}></div>
								<div className="farme" style={{ "--i": 17 } as any}></div>
								<div className="farme" style={{ "--i": 18 } as any}></div>
								<div className="farme" style={{ "--i": 19 } as any}></div>
								<div className="farme" style={{ "--i": 20 } as any}></div>
								<div className="farme" style={{ "--i": 21 } as any}></div>
								<div className="farme" style={{ "--i": 22 } as any}></div>
								<div className="farme" style={{ "--i": 23 } as any}></div>
								<div className="farme" style={{ "--i": 24 } as any}></div>
								<div className="farme" style={{ "--i": 25 } as any}></div>
								<div className="farme" style={{ "--i": 26 } as any}></div>
								<div className="farme" style={{ "--i": 27 } as any}></div>
								<div className="farme" style={{ "--i": 28 } as any}></div>
								<div className="farme" style={{ "--i": 29 } as any}></div>
								<div className="farme" style={{ "--i": 30 } as any}></div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 梯形 */}
				<div className='iframe-box6'>
					<Collapse destroyInactivePanel>
						<Panel header="梯形" key="6" forceRender>
							<div className='css-sub'></div>
						</Panel>
					</Collapse>
				</div>
				{/* 渐变边框 */}
				<div className='iframe-box7'>
					<Collapse destroyInactivePanel>
						<Panel header="渐变边框" key="7" forceRender>
							<div className='css-sub'></div>
						</Panel>
					</Collapse>
				</div>
				{/* 盒子超出换行 */}
				<div className='iframe-box8'>
					<Collapse destroyInactivePanel>
						<Panel header="盒子超出换行" key="8" forceRender>
							<div className='all-box'>
								<div className='css-sub'></div>
								<div className='css-sub'></div>
								<div className='css-sub'></div>
								<div className='css-sub'></div>
								<div className='css-sub'></div>
								<div className='css-sub'></div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 滚动条样式 */}
				<div className='iframe-box9'>
					<Collapse destroyInactivePanel>
						<Panel header="滚动条样式" key="9" forceRender>
							<div className='css-sub'></div>
						</Panel>
					</Collapse>
				</div>
				{/* 将图片或表单元素（行内块）和文字垂直居中 */}
				<div className='iframe-box10'>
					<Collapse destroyInactivePanel>
						<Panel header="vertical-align(行内元素有效)" key="10" forceRender>
							<p className='css-sub'>1 <span style={{ verticalAlign: "middle" }}>middle</span> 2</p>
							<p className='css-sub'>1 <span style={{ verticalAlign: "baseline" }}>baseline</span> 2</p>
							<p className='css-sub'>1 <span style={{ verticalAlign: "text-top" }}>top</span> 2</p>
							<p className='css-sub'>1 <span style={{ verticalAlign: "text-bottom" }}>bottom</span> 2</p>
						</Panel>
					</Collapse>
				</div>
				{/* box-shadow实现霓虹灯效果 */}
				<div className='iframe-box13'>
					<Collapse destroyInactivePanel>
						<Panel header="box-shadow实现霓虹灯效果" key="13" forceRender>
							<div className='css-sub'>
								<p className="pink">PINK</p>
								<p className="orange">Box-Shadow</p>
								<p className="yellow">YELLOW</p>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* contrast字体切换过渡 */}
				<div className='iframe-box15'>
					<Collapse destroyInactivePanel>
						<Panel header="contrast字体切换过渡" key="15" forceRender>
							<div className='css-sub'>
								<div className='word'>Blur Animation</div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* contrast进阶-快闪融合效果 */}
				<div className='iframe-box16'>
					<Collapse destroyInactivePanel>
						<Panel header="contrast快闪融合效果" key="16" forceRender>
							<div className='css-sub'>
								<div className="word">iPhone</div>
								<div className="word">13</div>
								<div className="word">Pro</div>
								<div className="word">强得很！</div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 单标签实现抖音图标 */}
				<div className='iframe-box17' >
					<Collapse destroyInactivePanel>
						<Panel header="单标签实现抖音图标" key="17" forceRender>
							<div className='css-sub'>
								<div className='douyin'></div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* 重叠标签实现抖音图标 */}
				<div className='iframe-box18'>
					<Collapse destroyInactivePanel>
						<Panel header="重叠标签实现抖音图标" key="18" >
							<div className='css-sub'>
								<div className="g-container">
									<div className="j"></div>
									<div className="j"></div>
								</div>
							</div>
						</Panel>
					</Collapse>
				</div>
				{/* css实现刻度效果 */}
				<div className='iframe-box19'>
					<Collapse destroyInactivePanel>
						<Panel header="css实现刻度效果" key="19" >
							<div className='css-sub'></div>
						</Panel>
					</Collapse>
				</div>
				{/* <div className='iframe-box10'>
					<Collapse destroyInactivePanel>
						<Panel header="" key="7" forceRender>
							<div className='css-sub'></div>
						</Panel>
					</Collapse>
				</div> */}
			</div >
		);
	}
}

export default Css_demo;